<template>
    <view class="component-widgets-search" :style="{ backgroundColor: backgroundColor }">
        <view class="icon">
            <text class="iconfont icon-sousuo"></text>
        </view>
        <input
            class="input"
            type="text"
            v-model="keywords"
            placeholder="搜索您需要的服务"
            placeholder-class="placeholder-style-1"
            :disabled="disabled"
        />
    </view>
</template>

<script>
export default {
    name: "component-widgets-search",
    data() {
        return {
            keywords: "",
        };
    },
    props: {
        disabled: {
            type: Boolean,
            default: false,
        },
        backgroundColor: {
            type: String,
            default: "#ffffff",
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    watch: {
        keywords(value) {
            this.$emit("input", value);
        },
    },
    methods: {},
};
</script>

<style lang="less" scoped>
.component-widgets-search {
    width: 670rpx;
    height: auto;
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    line-height: 65rpx;
    .icon,
    .input {
        color: #bebebe;
    }
    .icon {
        width: 85rpx;
        height: 65rpx;
        font-size: 30rpx;
        text-align: center;
    }
    .input {
        width: 585rpx;
        height: 65rpx;
        font-size: 28rpx;
    }
}
</style>